<template>
    <div>
        <h2>用户新增</h2>
        <el-row class="mt10">
            <el-col :span="8">
                <el-form
                    label-position="top"
                    label-width="100px"
                    :model="form"
                    class="myform"
                    ref="addform"
                    :rules="rules"
                >
                    <el-form-item 
                        label="用户名称" 
                        prop="username"
                    >
                        <el-input clearable v-model="form.username"  :prefix-icon="User" placeholder="请输入用户名"/>
                    </el-form-item>
                    <el-form-item
                        prop="phone"
                        label="手机号码"
                    >
                        <el-col :span="24">
                            <el-input v-model="form.phone" placeholder='请输入手机号码' clearable :prefix-icon="Iphone" > </el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item 
                        label="登录密码"
                        prop="password"
                    >
                        <el-input clearable disabled  v-model="form.password" :prefix-icon="Lock"  type="text"  placeholder="请输入密码" />
                    </el-form-item>
                    <el-form-item
                        prop="role"
                        label="用户角色"
                    >
                        <el-col :span="24">
                            <el-select v-if="userInfo" v-model="form.role" class="m-2" style="width:100%" placeholder="请设置用户角色" >
                                <el-option 
                                    v-for="(l,i) in roleList"
                                    :key="i"
                                    :label="l.label"
                                    :value="l.value"
                                    :disabled="userInfo.role<l.value"
                                />
                                <!-- :disabled="userInfo.role<l.value" -->
                            </el-select>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-button block type="success" class="btnblock" @click="submitForm">添加用户</el-button>
                        <el-button block type="warning" class="btnblock" @click="resetFields">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>


    </div>
</template>

<script>
import { reactive, toRefs , ref } from '@vue/reactivity'
import {UserFilled,Lock,User,Iphone} from '@element-plus/icons-vue'
import {reg} from "@/utils/validate"
import { ElMessage } from 'element-plus'
import {ajax} from '@/api'
import {useRouter} from "vue-router"
import { useStore } from 'vuex'
import { computed } from '@vue/runtime-core'
export default {
    setup(){
        const router = useRouter()
        const addform = ref()
        const store = useStore()
        const userInfo = computed(()=>store.state.userInfo)
        const state = reactive({
            UserFilled,
            Lock,
            User,
            Iphone,
            rules:{
                username:[
                    {required: true, message: '用户名称必填'}
                ],
                password:[
                    {required: true, message: '登录密码必填'},
                    {
                        pattern:reg.pwd,message:'密码格式不正确'
                    }
                ],
                phone:[{required:true,message:'手机号码必填'},{pattern:reg.phone,message:'请填写正确的手机号码'}],
                role:[{
                    required:true,
                    message:"请设置用户角色",
                    trigger:'change'
                }]
            },
            form:{
                password:"qwe123"
            },
        })
        const submitForm = ()=>{
            addform.value.validate(async valid=>{
                if(valid){
                    let {code,result} = await ajax.useradd(state.form)
                    if(code==200){
                        router.push({name:'user-list'})
                    }
                }else{
                    ElMessage.error("请输入有效的用户信息")
                }
            })
        }
        const resetFields = ()=>{
            addform.value.resetFields()
        }
        return {
            ...toRefs(state),
            addform,
            submitForm,
            resetFields,
            userInfo
        }
    }
}
</script>